/* doc layout */
body {
	text-align: left;
}

.hidden {
	display: none;	
}

#container {
	background-color: #3F8FD2;
	width: 742px;
	margin: auto;
}

/* panels */
#topPanel {
	padding: 5px;
}

#bottomPanel {
	padding: 0px 0px 5px 5px;
}

/* info card */
#closeInfoCard {
	color: black;
	float: right;
}

#infoCard table {
	border-collapse: collapse;
	margin: auto;
}

#infoCard table, #infoCard td, #infoCard th {
	border: 1px solid black;
}

#infoCard td, #infoCard th {
	padding: 3px;
	vertical-align: middle;
}

div#infoCard {
	display: none;
	text-align: center;
	padding: 10px;
	background-color: #eff;
}

/* help */

#userHelp {
	display: none;	
	width: 540px;
	height: 440px;
	overflow: auto;
	background-color: #eff;
	padding: 10px;
	text-align: center;
}

#userHelp #closeHelp {
	float: right;
}

.helpPart {
	margin: 10px;	
}

.helpPart div {
	text-align: left;
	display: none;	
}

#userHelp hr {
	border: 1px solid black;	
}

/* video help */

.videoLink {
	padding: 3px;
}

#video {
	display: none;	
}

#videoCloseButton {
	float: right;	
}

/* credits */
#credits h2 {
	font-size: 23px;
	padding: 10px;
}

div#credits {
	width: 445px;
	height: 460px;
	display: none;
	text-align: center;
	padding: 10px;
	background-color: #eff;
}

#credits table {
	border-collapse: collapse;
	margin: auto;
}

#credits table, #credits td, #credits th {
	border: 0px;
}

#credits td, #credits th {
	padding: 3px;
	vertical-align: middle;
}

#credits .nameCell {
	width: 200px;
	text-align: right;
	padding-right: 70px;
}

#credits .roleCell {
	width: 200px;
	text-align: left;
}

#closeCredits {
	float: right;
}

/* game board */
#board {
	display: inline-block;
	text-align: center;
}

#board table {
	border-collapse: collapse;
	background-image: url('../img/back.gif');
	background-repeat: repeat;
}

#board table, td {
	border: 1px solid black;
}

#board td {
	line-height: 39px;
	text-align: center;
	vertical-align: middle;
	height: 39px;
	width: 39px
}

.tile img {
	margin: auto;
	display: block;
	width: 90%;
	height: 90%;
}

.tile:hover {
	background-color: #d3e;
}

.tile.currentPlayerTile {
	background-color: #eee;	
}

.tile.currentPlayerTile:hover {
	background-color: #d3e;
}

/* upper right panel */
#upperRightPanel {
	display: inline-block;	
	vertical-align: top;
}


/* user options */

#userOptions input {
	width: 23px;	
}

#userOptions label.error {
	padding-left: 4px;	
}

#userOptions {
	border: 1px solid black;
	background-color: #eff;
	padding: 10px 10px 9px 10px;
	margin-bottom: 3px;
	width: 185px;
	height: 242px;
}

#upperRightPanelTop {
	padding-bottom: 5px;	
}

#upperRightPanelTop > h3 {
	vertical-align: 70%;
	display: inline-block;	
}

#upperRightPanelTop img {
	width: 20px;	
	display: inline-block;
	padding-left: 4px;
	float: right;
}

.companySlot {
	display: inline-block;
} 

.companySlot > img {
	width: 23px;
	opacity: 0.6;
	filter:alpha(opacity=60);
}

.companySlot.limited > img, .companySlot.limited > img:hover {
	opacity: 0.1;
	filter:alpha(opacity=10);
}

.companySlot > img:hover {
	filter:alpha(opacity=100);
	opacity: 1;
}

.companySlot > div {
	text-align: center;	
}

.selectText {
	padding: 5px;	
}

.stockTextBox { 
	padding: 5px;
}

.selectSection {
	padding: 5px;
}

#selectStocksAmount .stockAmount {
	padding: 5px 5px 5px 5px;
	background-color: #ddd;
	border: solid 1px black;
	width: 15px;
	height: 15px;
	vertical-align: middle;
	text-align: center;
	display: inline-block;
	margin-left: 5px;
}

#selectStocksAmount .stockAmount:hover {
	background-color: #aaa;	
}

#endGamePrematurely {
	margin-top: 80px;	
}

/* player list */

#playerList {
	border: 1px solid black;
	background-color: #eff;
	padding: 3px 4px 4px 4px;
	width: 197px;
	height: 126px;
}

#playerList .playerName img{
	margin: 7px;
}

#playerList .playingUser img {
	border: 2px solid #7500A3;
	padding: 2px;
	margin: 3px;
}

/* end of game */
#endOfGame table {
	margin-top: 5px;
	width: 100%;	
}

#endOfGame table, #endOfGame tr, #endOfGame td, #endOfGame th {
	border: 1px solid black;	
}

#endOfGame td, #endOfGame th {
	padding: 1px;	
}

/* player info */
#extra {
	border: 1px solid black;
	padding: 10px;
	vertical-align: top;
	display: inline-block;
	text-align: center;
	background-color: #eff;
	width: 255px;
	height: 110px;
}

.infoText {
	
}

#playerStocks .infoText {
	vertical-align: 170%;
}

#playerTiles {
	padding: 3px;
	text-align: center;
	padding-bottom: 10px;
}

.playerTile {
	margin-left: 3px;
	padding-top: 3px;
	background-color: #ddd;
	border: 1px solid black;
	width: 23px;
	height: 16px;
	vertical-align: middle;
	display: inline-block;
}

#playerStocks {
	padding: 3px;
	padding-bottom:10px;
}

.playerStock {
	display: inline-block;
} 

.playerStock > img {
	width: 23px;
}

#playerMoneyWrap {
	padding: 5px;	
}

/* buttom right panel */

#bottomRightPanel {
	display: inline-block;
	width: 450px;
	height: 110px;	
}


/* log section */
#playerLog {
	border: 1px solid black;
	padding: 10px;
	background-color: #eff;
	height: 90px;
	text-align: left;
	overflow: auto;
	width: 428px;
}

#playerLog .logEntry {
	padding: 3px;	
}

#playerLog .privateMessage {
	font-style: italic;	
}

/* chat */

#chatTextBox {
	
	width: 450px;	
}

#chatTextBox input {
	width: 92%;
	height: 16px;
}

#postWrapper {
	width: 29px;
	height: 20px;
	cursor:pointer; cursor:hand;
	display: inline-block;
	vertical-align: bottom;
}

#chatTextBox input, #chatTextBox input.error, #chatTextBox input.valid {
	font-family: sans-serif; 
	border: 1px solid black;
}

.chatMessage {
	color: blue;
}

/***** avatar tooltip ****/

.tooltip {
	display: none;
	padding: 3px;
	background-color: blue;
	color: white;	
}
